<template>
	<!-- 搜索栏 --> 
	<view class="wrap">
		<view class="search-box">
			<view class="search-img-box" @tap="search">
				<image src="../../static/icons/search_btn.png" mode="widthFix"></image>
			</view>
			<input type="text" class="bd-bottom-same" placeholder="演员/其他" v-model="value"/>
		</view>
		<view class="tips">豆瓣电影搜索接口已经凉了~~</view>
		<!-- 垃圾箱 -->
		<view class="bin"><image src="../../static/icons/bin.png" mode="widthFix"></image></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: null
			}
		},
		methods: {
			search: function () {
				let searchData = global.BaseList.search;
				let keyWords = this.value;
					this.$http.get(searchData+'?q='+keyWords).then(res=>{
						if(res.code == 1001){
							uni.showToast({
								title: '未找到资源！',
								icon: 'none',
								duration: 1200
							})
						}
					})
			}
		}
	}
</script>

<style>
	.search-box{
		position: relative;
		
	}
	.search-box .search-img-box{
		position: absolute;
		top: 14upx;
		right: 10upx;
		z-index: 999;
		width: 42upx;
		height: 42upx;
	}
	.search-img-box image{
		display: block;
		width: 100%;
	}
	.search-box input{
		padding: 20upx;
		text-align: center;
		color: #333;
	}
	.bin{
		padding: 20upx 0;
		display: flex;
		justify-content: flex-start;
	}
	.bin image{
		display: block;
		width: 38upx;
		/* animation: sway 1s; */
	}
	/* @keyframes sway{
		0%{
			transform: rotate(30deg);
		}
		10%{
			transform: rotate(0deg);
		}
		20%{
			transform: rotate(-30deg);
		}
		30%{
			transform: rotate(0deg);
		}
		40%{
			transform: rotate(45deg);
		}
		50%{
			transform: rotate(-45deg);
		}
		60%{
			transform: rotate(45deg);
		}
		70%{
			transform: rotate(-45deg);
		}
		80%{
			transform: rotate(0deg);
		}
		90%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(0deg);
		}
	} */
</style>
